<template>
  <div>
    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>

        <th>编号</th>
        <th>商品名</th>
        <th>产地</th>
        <th>价格</th>
        <th>数量</th>
        <th>单项总价</th>
        <th>类型</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="product in productList">
        <td>{{ product.id }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.factory }}</td>
        <td>{{ product.price }}</td>
        <td><input type="number" v-model="product.num"></td>
        <td>{{ product.price * product.num }}</td>
        <td>{{ product.type }}</td>
        <td><input type="button" value="删除" @click="delProduct(product.id)">
          <input type="button" value=" 修改" @click="findById(product.id),updateDiv=true"></td>
      </tr>
      </tbody>
      <input type="button" v-for="page in pages" :key="page" :value="page"
             @click="findByItem(page)" style="margin-left: 20px">
      <div>
        购物车总价：{{ allMoney }}
      </div>
      <input type="button" value="添加" @click="addDiv=true">
    </table>
    <div class="showDiv" v-if="addDiv">
      <div class="infoDiv">
        编号： <input type="text" v-model="addObj.id"> <br>
        商品名： <input type="text" v-model="addObj.name"> <br>
        产地： <input type="text" v-model="addObj.factory"> <br>
        价格： <input type="text" v-model="addObj.price"> <br>
        类型： <select v-model="addObj.type">
        <option value="食品">食品</option>
        <option value="电器">电器</option>
      </select> <br>
        <input type="button" value="添加" @click="addProduct()">
        <input type="button" value="返回" @click="addDiv=false">
      </div>
    </div>

    <div class="showDiv" v-if="updateDiv">
      <div class="infoDiv">
        编号：{{ updateObj.id }}<br>
        商品名：{{ updateObj.name }}<br>
        产地：{{ updateObj.factory }}<br>
        单价：<input type="text" v-model="updateObj.price"><br>
        类别：{{ updateObj.type }}<br>
        <input type="button" value="修改" @click="update()">


      </div>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: 5,
      productList: [
        {"id": 1, "name": "电饭煲", factory: "深圳", price: 500, type: "电器", num: 1},
        {"id": 2, "name": "啤酒", factory: "青岛", price: 8, type: "食品", num: 1},
        {"id": 13, "name": "电吹风", factory: "义乌", price: 50, type: "电器", num: 1},
        {"id": 4, "name": "电水壶", factory: "北京", price: 400, type: "电器", num: 1},
        {"id": 8, "name": "电冰箱", factory: "青岛", price: 1400, type: "电器", num: 1},
        {"id": 5, "name": "汉堡", factory: "成都", price: 4, type: "食品", num: 1},
        {"id": 9, "name": "薯条", factory: "上海", price: 6, type: "食品", num: 1},
      ],
      addDiv: false,
      addObj: {},
      updateDiv: false,
      updateObj: {},


    }
  },
  methods: {
    addProduct() {
      this.productList.push(this.addObj);
      this.addDiv = false;
      this.addObj = {};
    },
    delProduct(id) {
      let index = this.productList.findIndex(n => n.id == id)
      this.productList.splice(index, 1);
    },
    findById(id) {
      this.updateObj = this.productList.find(n => n.id == id)
    },
    update() {
      this.updateDiv = false;
      this.updateObj = {};
    },
    findByItem(page) {
      alert(page);
    }

  },
  computed: {
    allMoney() {
      var money = 0;
      this.productList.forEach(n => {
        money += n.num * n.price;
      })
      return money;
    }
  }
}
</script>

<style scoped>

.showDiv {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
}

.infoDiv {
  width: 600px;
  height: 400px;
  background: white;
  border: 2px solid #000;
}
</style>